


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 网站用户 iframe 框</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<style>
  .layui-form-select{
    width:200px
  }
  .layui-select-title{
    width:200px
  }
  .layui-input{
    width: 200px;
  }
  
</style>
<body>

  <div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
    <div class="layui-form-item">
      <label class="layui-form-label">院系名称</label>
      <div class="layui-input-inline">
        <input type="text" name="departmentName" lay-verify="required" placeholder="请输入院系名称" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">院系编号</label>
      <div class="layui-input-inline">
        <input type="text" name="departmentId" lay-verify="required" placeholder="请输入院系编号" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">联系方式</label>
      <div class="layui-input-inline">
        <input type="text" name="contactPhone" lay-verify="phone" placeholder="请输入号码" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
      </div>
    </div>

      <div class="layui-form-item">
        <div class="layui-form-label">学院简介</div>
        <div class="layui-input-inline">
            <textarea name="description" placeholder="请输入描述信息" autocomplete="off" class="layui-input" style="width: 250px; height: 150px"></textarea>
        </div>
      </div>


    
  </div>
  <script src="./JS/utils/request.js"></script>
  <script src="./JS/utils/auth.js"></script>
  <script src="../layui/layui.all.js"></script>  
  <script>
layui.use(['form', 'jquery','upload'], function(){
            let form = layui.form;
            let $ = layui.$;
            let upload = layui.upload
            // 定义提交方法供父页面调用
            window.submitForm = function(callback) {
                // 表单验证
                form.verify();
                
                // 获取表单数据
                let formData = {
                    departmentId: $('input[name="departmentId"]').val(),
                    departmentName:$('input[name="departmentName"]').val(),
                    contactPhone:$('input[name="contactPhone"]').val(),
                    email: $('input[name="email"]').val(),
                    description:$('textarea[name="description"]').val()
                };

                console.log(formData);
                
                // 发送AJAX请求
                $.ajax({
                    url: '/departments/insert',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    headers:{
              'Authorization':localStorage.getItem('token')
    },
                    success: function(res){
                      console.log(res)
                        if(res.code === 0){
                            callback(true);
                        } else {
                            layer.msg(res.msg || '提交失败');
                            callback(false);
                        }
                    },
                    error: function(xhr){
                        layer.msg('请求失败: ' + xhr.statusText);
                        callback(false);
                    }
                });
            };

            // // 初始化上传组件
            // upload.render({
            //   elem: '#layuiadmin-upload-useradmin',
            //   url: '/departments/upload', // 上传接口
            //   accept: 'images',   // 只允许选择图片文件
            //   acceptMime: 'image/*', // 限制文件类型
            //   size: 500,          // 500KB限制
            //   done: function(res){
            //     // console.log(res)
            //     if(res.code === 0) {
            //       layer.msg('上传成功');
            //       // 预览图片
            //       $('#avatarPreview').html(
            //               `<img src="${res.data}" style="max-width: 100px; margin-top: 10px;">`
            //       );
            //     } else {
            //       layer.msg(res.msg || '上传失败');
            //     }
            //   },
            //   error: function(){
            //     layer.msg('上传失败，请检查网络连接');
            //   }
            // });

            // 暴露初始化方法供父页面调用用于编辑信息时的数据回显
            window.initFormData = function(data){
              // 填充表单数据
              form.val('layuiadmin-form-useradmin', {
                "departmentId": data.departmentId,
                "departmentName": data.departmentName,
                "contactPhone": data.contactPhone,
                "email":data.email,
                "description":data.description
              });
              // // 预览图片
              // $('#avatarPreview').html(
              //         `<img src="${data.avatar}" style="max-width: 100px; margin-top: 10px;">`
              // );
              // 更改学院信息时，学院ID为只读不可更改
              $('input[name="departmentId"]').attr('readonly',true);
              // 重新渲染表单
              form.render();
            };

        //     保存更改后的表单数据
        // 定义提交方法供父页面调用
        window.updateForm = function(callback) {
          // 表单验证
          form.verify();

          // 获取表单数据
          let formData = {
            departmentId: $('input[name="departmentId"]').val(),
            departmentName:$('input[name="departmentName"]').val(),
            contactPhone:$('input[name="contactPhone"]').val(),
            email: $('input[name="email"]').val(),
            description:$('textarea[name="description"]').val()
          };

          console.log(formData);

          // 发送AJAX请求
          $.ajax({
            url: '/departments/update',
            method: 'PUT',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            headers:{
              'Authorization':localStorage.getItem('token')
    },
            success: function(res){
              console.log(res)
              if(res.code === 0){
                callback(true);
              } else {
                layer.msg(res.msg || '更新失败');
                callback(false);
              }
            },
            error: function(xhr){
              layer.msg('请求失败: ' + xhr.statusText);
              callback(false);
            }
          });
        };


        });
  </script>
</body>
</html>